<template>
	<view class="content">
		<view @click="previewImage(acitveIndex,goodInfo.head_imgs)" style="width: 750rpx;height: 782rpx;"
			class="position-relative">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999999999;">
				<!--background: ``  -->
				<view class="backGround"
					:style="{background: `url(${ imgaeUrl('/static/bg.png')})`,opacity: headerOpt }">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#333333" size="20"></uv-icon>
							</view>
							<view class="font-size-32 color-333 font-weight-500">
								商品详情
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999999999;">
				<!--background: ``  -->
				<view class="backGround">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view class="display-flex align-items">
								<view @click.stop="navigateBack()" class="margin-top-05">
									<uv-icon name="arrow-left" color="#333333" size="20"></uv-icon>
								</view>
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<uv-swiper radius="0" @change="(e)=> acitveIndex = e.current" keyName="images" height="782rpx"
				:list="goodInfo.head_imgs"></uv-swiper>
			<view style="bottom: 20rpx;right: 20rpx;" class="seipernum position-absolute font-size-24 color-FFF">
				{{(acitveIndex+ 1) + '/' + goodInfo?.head_imgs?.length}} 点击图片长按保存
			</view>
		</view>
		<view class="padding-about-24">
			<view class="view margin-top-20">
				<view class="display-flex align-items">
					<view class="display-flex align-items">
						<view class="margin-top-10" style="color: #FF2E38;">
							<text class="font-size-24 font-weight-bold">￥</text>
							<text class=" font-size-36 font-weight-bold">{{goodInfo.sale_price}}</text>
						</view>
						<view class="display-flex margin-left-10 margin-top-15 align-items">
							<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
								class="label center-size-20  color-FFF">
								{{goodInfo.plan_type == 1? '定向佣金':'预估佣金'}}
							</view>
							<view
								style="padding-left: 10px; padding-left: 10rpx; color: #FF2E38;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
								class="center-size-20">
								<text style="padding-right: 10rpx;">¥{{goodInfo.money}}</text>
								<text style="padding:0 10px;color: red;"
									v-if="goodInfo.stock > 0 && goodInfo.subsidy_price > 0">+
									补贴{{goodInfo.subsidy_price}}元</text>
							</view>
						</view>
					</view>
				</view>
				<view class="margin-top-10 font-size-28  font-weight-500">
					{{goodInfo.title}}
				</view>
				<view @click="switchTab('/pages/Mine/mine/mine')" v-if="goodInfo.money != goodInfo.max_money"
					class="vip margin-top-10 display-flex space-between align-items">
					<view class="font-size-24" style="color: #4F2A19;">
						{{goodInfo.level_desc}} <text style="color: #FE6840;">{{goodInfo.max_money}} 元</text>
					</view>
					<view class="itemvip display-flex center align-items" @click="navigateTo('pages/Mine/mine/mine')">
						<image :src="imgaeUrl('/static/mine/vip.png')" style="width: 36rpx;height: 36rpx;" mode="">
						</image>
						<view class="font-size-24" style="color: #F1DFCA;">
							立即升级
						</view>
						<view class="margin-top-05">
							<uv-icon name="arrow-right" color="#F1DFCA" size="10"></uv-icon>
						</view>
					</view>
				</view>
				<view v-if="goodInfo?.coupon?.end_time" style="width: 654rpx; height: 144rpx;"
					class="margin-top-20 display-flex space-between align-items backGround"
					:style="{background: `url(${imgaeUrl('/static/home/yhq.png')})`}">
					<view style="width: 200rpx;" class="display-flex flex-direction-column center align-items">
						<view class="color-FFF">
							<text class="font-size-28">¥</text>
							<text class="font-size-60 font-weight-bold">{{goodInfo.price}}</text>
							<text class="font-size-28">元</text>
						</view>
						<view class="font-size-28 color-FFF">
							立减
						</view>
					</view>
					<view class="file-1 display-flex space-around align-items">
						<view class="">
							<view class="font-size-24 color-FFF">
								内部优惠券
							</view>
							<view class="font-size-22 color-FFF display-flex align-items">
								<!-- 227天 09:00:22 -->

								<view class="margin-top-05">
									<uv-count-down :time="(goodInfo.coupon.end_time * 1000) - Date.now()" format="DD天HH时mm分ss秒"></uv-count-down>
								</view>后结束
							</view>

						</view>
						<view @click="getCouponLink()" class="buttons display-flex center align-items">
							复制券链接
						</view>
					</view>
				</view>
				<view class="font-size-24 " style="color: #7C7C7C;">
					<view class="margin-top-20">
						提示 佣金以实际转链佣金为准
					</view>
					<view class="margin-top-10">
						声明 商品销售者为购物链接所属店铺精英者，非本平台
					</view>
				</view>
			</view>
			<!-- <view style="z-index: 1;" class="view margin-top-20">
				<view class="display-flex space-between">
					<view style="width: 36%;padding-top: 14rpx;" class="font-size-28 font-weight-500">
						推广数据
					</view>
					<view class="file-1">
						<uv-tabs :list="tabslist" lineWidth="15"
							lineColor="linear-gradient( 270deg, #FE6740 0%, #FE8B1D 100%)" :activeStyle="{
														color: '#262626',
														fontWeight: '500',
														transform: 'scale(1.05)',
														fontSize:'24rpx'
											    	}" :inactiveStyle="{
														color: '#7C7C7C',
														transform: 'scale(1)',
														fontSize:'24rpx'
													}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></uv-tabs>
					</view>
				</view>
				<view class="display-flex space-between align-items margin-top-20"
					style="background: #F6F6F6; padding: 24rpx;border-radius: 24rpx;">
					<view class="display-flex  center align-items flex-direction-column">
						<view class="font-size-32 font-weight-bold">
							2,814
						</view>
						<view class="font-size-22" style="color: #7C7C7C;">
							销量
						</view>
					</view>
					<view class="display-flex  center align-items flex-direction-column">
						<view class="font-size-32 font-weight-bold">
							2,814
						</view>
						<view class="font-size-22" style="color: #7C7C7C;">
							浏览量
						</view>
					</view>
					<view class="display-flex  center align-items flex-direction-column">
						<view class="font-size-32 font-weight-bold">
							2,814
						</view>
						<view class="font-size-22" style="color: #7C7C7C;">
							出单率
						</view>
					</view>
					<view class="display-flex  center align-items flex-direction-column">
						<view class="font-size-32 font-weight-bold">
							2,814
						</view>
						<view class="font-size-22" style="color: #7C7C7C;">
							出单率
						</view>
					</view>
				</view>
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
			</view> -->
			<view class="view margin-top-20 display-flex space-between align-items">
				<view class="display-flex align-items">
					<image :src="goodInfo.shop_icon" style="width: 100rpx;height: 100rpx;" class="border-radius"
						mode="">
					</image>
					<view class="margin-left-10">
						<view class="font-size-28 font-weight-500">
							{{goodInfo.shop_name}}
						</view>
						<view style="padding: 4rpx 10rpx;color: #FE6B3B;background: #FFF3F0; border-radius: 24rpx;"
							class="font-size-22 color-FFF margin-top-10">
							评分：{{goodInfo.shop_score}}
						</view>
					</view>
				</view>
				<!-- <view class="button color-FFF font-size-24" style="padding: 12rpx 40rpx;">
					进店瞧瞧
				</view> -->
			</view>
			<view class="view margin-top-20" v-if="local.get('config').is_deepseek == 1">
				<view class="display-flex align-items">
					<view class="font-size-28 font-weight-500">
						推广文案
					</view>
					<view class="font-size-22" style="color: #E1E1E1;margin: 0  12rpx;">
						|
					</view>
					<image :src="imgaeUrl('/static/home/deep.png')" style="width: 155.99rpx;height: 38rpx;"
						mode="widthFix">
					</image>
				</view>
				<view class="font-size-24 " style="color: #7C7C7C;">
					<view class="margin-top-10">
						点击下方按钮，获取您的专属推广文案吧~
					</view>
				</view>
				<view class="textarea display-flex margin-top-20 flex-direction-column">
					<view class="display-flex space-between align-items">
						<view class="font-size-26 font-weight-500">
							文案内容
						</view>
						<view v-if="aimessages.length==1" @click="setClipboardData(aimessages[0].content)"
							class="buttons display-flex align-items center" style="width: 124rpx;height: 48rpx;">
							<image :src="imgaeUrl('/static/mine/copy.png')" style="width: 21rpx;height: 21rpx;" mode="">
							</image>
							<view class="color-333">
								复制
							</view>
						</view>
					</view>
					<view class="file-1 margin-top-20 font-size-24 font-weight-500" style=" overflow: scroll;">

						<view v-for="item,index in aimessages" :key="index"
							:style="item.status != -1?'padding-bottom:10rpx;':''">
							<view
								:style="item.status != -1?'border-bottom: 1rpx solid #e7e7e7; padding-bottom:10rpx;':''">
								<view class="">
									<view @click="setClipboardData(item.content)" v-if="aimessages.length != 1"
										class="text-right" style="color: #FE6B3C;">
										复制
									</view>
									<!-- <view class="">
										{{item.content}}
									</view> -->
									<view class="ai-content">
										<text class="ai-text">{{ item.content }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view @click="getdeepseek()" style="padding: 20rpx 0;"
					class="button display-flex align-items center margin-top-40 text-center color-FFF font-size-28 font-weight-500">
					<image v-if="islod" style="width: 35rpx;height: 35rpx;" class="margin-right-20"
						:src="imgaeUrl('/static/lod.gif') " mode="">
					</image>
					<view class="">
						生成推广文案
					</view>
				</view>
				<view class="font-size-24 margin-top-10 text-center" style="color: #7C7C7C;">
					推广文案链接已带锁佣能力
				</view>
			</view>
			<view class="view margin-top-20">
				<view class="font-size-28 font-weight-500">
					素材图片
				</view>
				<view class="item-view margin-top-20">
					<view v-for="item,index in sourcematerial" @click="item.ischeck = !item.ischeck" :key="index"
						style="width: 208rpx;height: 208rpx;" class="position-relative">
						<image :src="item.image" style="width: 208rpx;height: 208rpx;" class="border-radius-12"
							mode="aspectFill"></image>
						<view class="position-absolute" style="top: 0;right: 0;">
							<uv-icon v-if="item.ischeck" name="checkmark-circle-fill" color="#FF8D1E"
								size="20"></uv-icon>

							<view v-else class="border-radius"
								style="border: 1rpx solid #333333; width: 16px;height: 15px;background: #FFFFFF;">

							</view>
						</view>
					</view>
				</view>
				<view @click="downloadFile()" style="padding: 20rpx 0;"
					class="button margin-top-40 text-center color-FFF font-size-28 font-weight-500">
					保存素材
				</view>
			</view>

			<view class="display-flex align-items center margin-top-40">
				<image :src="imgaeUrl('/static/home/l.png')" style="width: 100rpx;" mode="widthFix"></image>
				<view class="font-size-32 font-weight-500" style="color: #FF7E00;margin: 0 20rpx;">
					商品详情
				</view>
				<image :src="imgaeUrl('/static/home/r.png')" style="width: 100rpx;" mode="widthFix"></image>
			</view>
			<view class=" margin-top-20">
				<image v-for="item,index in goodInfo.content" :key="index" :src="item"
					style="margin-top: -10rpx; width: 100%;" mode="widthFix">
				</image>
			</view>
		</view>
		<div class="kong"></div>
		<div class="kong"></div>
		<div class="kong safe-area-inset-bottom"></div>
		<view class="bottom " style="border-radius: 4rpx 4rpx 0 0;" v-if="isshow">
			<view class="" style="padding: 10rpx 0;">
				<view class="padding-about-24 display-flex space-between align-items">
					<view class="display-flex align-items">
						<view @click="switchTab('/pages/Home/home/home')"
							class="display-flex margin-right-20 flex-direction-column center align-items">
							<image :src="imgaeUrl('/static/home/home.png')" style="width: 42rpx;height: 42rpx;" mode="">
							</image>
							<view class="font-size-22" style="color: #7C7C7C;">
								首页
							</view>
						</view>
						<view @click="goodsLike"
							class="display-flex margin-left-20 flex-direction-column center align-items">
							<image v-if="goodInfo.collect_status == 1" :src="imgaeUrl('/static/home/xsc.png')"
								style="width: 42rpx;height: 42rpx;" mode=""></image>
							<image v-if="goodInfo.collect_status == 0" :src="imgaeUrl('/static/home/sc.png')"
								style="width: 42rpx;height: 42rpx;" mode=""></image>
							<view class="font-size-22" style="color: #7C7C7C;">
								收藏
							</view>
						</view>
					</view>
					<view class="display-flex">
						<view @click="share"
							class="view-botton font-size-28 font-weight-500 display-flex center align-items">
							分享佣金 ¥{{goodInfo.money}}
						</view>

						<!-- <view
							style="width: 280rpx;height: 80rpx;font-size: 28rpx;color: #fff;padding-left: 20rpx;padding-right: 20rpx;box-sizing: border-box;text-align: center;line-height: 80rpx;overflow: hidden;"
							class="button display-flex center align-items margin-left-20 color-FFF font-size-28 font-weight-500">
							<store-product style="width: 252rpx;height: 80rpx; margin-top: 32rpx;"
								:custom-content="true" class="display-flex center align-items "
								:product-promotion-link="goodInfo.product_promotion_link" :appid="goodInfo.appid"
								:product-id="goodInfo.product_id">
								购买省 ¥{{goodInfo.money}}
							</store-product>

						</view> -->
						<view v-if="local.get('userinfo').is_tk == 1"
							style="width: 280rpx;height: 80rpx;font-size: 28rpx;color: #fff;padding-left: 20rpx;padding-right: 20rpx;box-sizing: border-box;text-align: center;line-height: 80rpx;overflow: hidden;"
							class="button display-flex center align-items margin-left-20 color-FFF font-size-28 font-weight-500">
							<store-product style="width: 252rpx;height: 80rpx; margin-top: 32rpx;"
								:custom-content="true" class="display-flex center align-items "
								:product-promotion-link="goodInfo.product_promotion_link" :appid="goodInfo.appid"
								:product-id="goodInfo.product_id">
								购买省 ¥{{goodInfo.money}}
							</store-product>
						</view>
						<view v-else @click="istk"
							style=" width: 280rpx;height: 80rpx;font-size: 28rpx;color: #fff;padding-left: 20rpx;padding-right: 20rpx;box-sizing: border-box;text-align: center;line-height: 80rpx;overflow: hidden;"
							class="button display-flex center align-items margin-left-20 color-FFF font-size-28 font-weight-500">
							购买省 ¥{{goodInfo.money}}

						</view>
					</view>
				</view>
			</view>
			<view class="safe-area-inset-bottom">

			</view>
		</view>
		<!-- <uv-popup ref="popup" mode="bottom">
			<view style="height: 60vh;">
				<view class="" style="padding: 24rpx;">
					<image src="/" mode=""></image>
				</view>
			</view>
		</uv-popup> -->
		<a-customAuth ref="popup"></a-customAuth>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom,
		onPageScroll,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack,
		setClipboardData,
		switchTab,
		previewImage,
		debounce
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const goodInfo = ref({})
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const acitveIndex = ref(0)
	const chartData = ref({})
	const headerOpt = ref(0)
	const deepseekinfo = ref({})
	const opts = ref({
		color: ["#417FFF", "#8ADDA8", "#4DB9F7", "#FFC646"],
		extra: {
			column: {
				type: "group",
				width: 20,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08,
				labelPosition: 'center'
			}
		}
	})
	const popup = ref(null)
	const tabslist = ref([{
		name: '近七日'
	}, {
		name: '近30日',
	}, {
		name: '近90日'
	}])
	const aimessages = ref([{
		status: '-1',
		content: '点击下方按钮，获取您的专属推广文案吧'
	}])
	const sourcematerial = ref([])
	const goodsId = ref('')
	const islod = ref(false)
	const isshow = ref(false)
	onLoad(function(option) {
		console.log(option, 'optionoptionoption');
		goodsId.value = option.id
		if (option.puserId && !local.get('puserId')) {
			local.set('puserId', option.puserId)
		}
		if (local.get('token')) {
			getGoodInfo()
		} else {
			getLogincode()
		}


	});
	onShow(function() {});
	async function getCouponLink(){
		let object = {
			coupon_id:goodInfo.value.coupon.coupon_id
		}
		const {code,data} = await api.getCouponLink(object)
		if(code == 0){
			setClipboardData(goodInfo.value.title + data.link)
		}
	}
	async function getLogincode() {
		const ret = await uni.login()
		console.log(ret.errMsg);
		if (ret.errMsg == 'login:ok') {
			login(ret.code)
		}
	}
	async function login(code) {
		const ret = await api.login({
			code,
			puserid: local.get('puserId') || 0
		})
		if (ret.code == 0) {
			local.set('token', ret.data.token)
			getuserinfo()
		}
	}
	async function getuserinfo() {
		const {
			code,
			data
		} = await api.getuserinfo()
		if (code == 0) {
			local.set('userinfo', data)
			getGoodInfo()
		}
	}
	const share = debounce(async function() {
		console.log(1);
		// 输入处理逻辑
		// 1是  2否
		if (local.get('userinfo').is_tk != 1) {
			popup.value.open()
			return;
		}
		uni.showLoading({
			title: '加载中',
		});
		let object = {
			product_id: goodsId.value
		}
		const {
			code,
			data
		} = await api.getGoodsQrcode(object)
		uni.hideLoading();
		if (code == 0) {
			uni.downloadFile({
				url: data.url,
				success: (ress) => {
					wx.showShareImageMenu({
						path: ress.tempFilePath, //要分享的图片地址，必须为本地路径或临时路径
						success: (re) => {
							console.log({
								success: re
							})
						},
						fail: (re) => {
							console.log({
								fail: re
							})
						}
					})
				}
			})
		}
	}, 500)

	function istk(item) {
		let that = this
		if (local.get('userinfo').is_tk != 1) {
			popup.value.open()
			return;
		}
	}

	async function downloadFile() {
		if (local.get('userinfo').is_tk != 1) {
			popup.value.open()
			return;
		}
		uni.showLoading({
			title: '加载中',
		});
		let array = sourcematerial.value.filter(item => item.ischeck)

		if (array.length == 0) return nativeUI('请选择要保存的图片')
		let imgUrls = array.map(item => item.image).toString()
		// let imgUrls = array.map(item => item.image)
		console.log(imgUrls);
		let object = {
			product_id: goodsId.value,
			imgUrls,
		}
		const {
			code,
			data
		} = await api.saveSource(object)
		if (code == 0) {
			uni.hideLoading();
			for (var i = 0; i < data.length; i++) {
				let item = data[i]
				uni.downloadFile({
					url: item,
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: "保存成功",
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: "保存失败，请稍后重试",
										icon: "none"
									});
								}
							});
						}
					}
				})
			}
		}

	}
	async function goodsLike() {
		let object = {
			product_id: goodsId.value,
			likeStatus: goodInfo.value.collect_status == 1 ? 0 : 1
		}
		const {
			code,
			data
		} = await api.goodsLike(object)
		if (code == 0) {
			nativeUI(goodInfo.value.collect_status == 1 ? '取消成功！' : '收藏成功！')
			goodInfo.value.collect_status == 0 ? goodInfo.value.collect_status = 1 : goodInfo.value.collect_status = 0
			console.log(goodInfo.value);
		}
	}
	async function getGoodInfo(e) {
		let object = {
			product_id: goodsId.value
		}
		const {
			code,
			data
		} = await api.getGoodInfo(object)
		if (code == 0) {
			goodInfo.value = data
			isshow.value = true
			for (var i = 0; i < data.head_imgs.length; i++) {
				let item = data.head_imgs[i]
				sourcematerial.value.push({
					image: item,
					ischeck: true
				})
			}
		}
	}
	/**
	 * 获取推广数据
	 */
	async function getServerData() {
		let object = {
			product_id: goodsId.value
		}
		const {
			code,
			data
		} = await api.promotionData(object)
		//模拟从服务器获取数据时的延时
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
				series: [{
						name: "目标值",
						data: [35, 36, 31, 33, 13, 34],

					},
					{
						name: "完成量",
						data: [18, 27, 21, 24, 6, 28]
					},
					{
						name: "期望值",
						data: [35, 36, 31, 33, 13, 34],

					},
					{
						name: "期望值",
						data: [35, 36, 31, 33, 13, 34],

					},
				]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	/**
	 * 获取deepseek数据
	 */
	async function getdeepseek() {
		if (local.get('userinfo').is_tk != 1) {
			popup.value.open()
			return;
		}
		islod.value = true
		let object = {
			product_id: goodsId.value
		}
		const {
			code,
			data
		} = await api.getdeepseek(object)
		if (code == 0) {

			if (aimessages.value[0].status == -1) {
				data.content = data.content + data.path
				aimessages.value = [data]
			} else {
				data.content = data.content + data.path
				aimessages.value.unshift(data)
			}
			deepseekinfo.value = data
		}
		islod.value = false
	}
	onReady(function() {
		// getServerData()
	});
	onReachBottom(function() {});
	onPageScroll(function(e) {
		// scrollTop.value = e.scrollTop
		headerOpt.value = Math.min(1, e.scrollTop / 200);
	})
	const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面
	// 获取到当前页面的路径和参数
	const page = pages[pages.length - 1].route; //完整路由地址
	onShareAppMessage(function(res) {
		return {
			title: goodInfo.value.title,
			imageUrl: goodInfo.value.head_imgs[0],
			path: page + '?id=' + pages[pages.length - 1].options.id + '&puserId=' + local.get('userinfo').id,
		}
	})
	onShareTimeline(function(res) {
		return {
			title: goodInfo.value.title,
			imageUrl: goodInfo.value.head_imgs[0],
			path: page + '?id=' + pages[pages.length - 1].options.id + '&puserId=' + local.get('userinfo').id,
		}
	})
</script>

<style scoped lang="scss">
	::v-deep .uv-count-down {
		.uv-count-down__text {
			color: #FFFFFF !important;
			font-size: 22rpx !important;
			font-weight: 500 !important;
		}
	}

	.view-botton {
		width: 252rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 2rpx solid #FE6B3C;
		color: #FE6B3B;
	}


	.item-view {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx 10rpx;
	}

	.textarea {
		padding: 24rpx;
		height: 320rpx;
		background: #F6F6F6;
		border-radius: 24rpx;
	}

	.buttons {
		width: 180rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #FB3931;
	}

	.itemvip {
		width: 192rpx;
		height: 48rpx;
		background: #2F3239;
		border-radius: 24rpx;
	}

	.vip {
		padding: 14rpx 18rpx;
		background: #FEEEDC;
		border-radius: 16rpx;
	}

	.label1 {
		width: 68rpx;
		height: 32rpx;
		background: #FEEBEA;
		border-radius: 0rpx 6rpx 6rpx 0rpx;
		color: #E02E22;

	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 6rpx 0 0 6rpx;
	}

	.view {
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
	}

	.ai-text {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
	}

	.backGround {
		width: 750rpx;
		height: 518rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}

	.seipernum {
		padding: 8rpx 16rpx;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 24rpx;
	}
</style>